/*
 * @Description: 音视频预览组件
 * @Author: Rfan
 * @Date: 2022-03-01 15:45:28
 * @LastEditTime: 2022-09-27 20:15:36
 */

import { useEffect, useRef, useState } from 'react';
import VideoJS from './Videojs';

const VideoViewer = (props: any) => {
  const [ab, setAb] = useState(0);
  const { src, type = '' } = props;
  console.log('view', src, type);
  console.log(ab);
  const playerRef = useRef(null);
  const videoJsOptions = {
    // lookup the options in the docs for more options
    autoplay: true,
    controls: true,
    responsive: true,
    fluid: true,
    audioOnlyMode: type.indexOf('audio') > 0,
    sources: [
      {
        src
        // type
      }
    ]
  };

  useEffect(() => {
    setAb((state) => state + 1);
    changePlayerOptions();
  }, [src]);

  const handlePlayerReady = (player: any) => {
    playerRef.current = player;

    // you can handle player events here
    player.on('waiting', () => {
      // console.log('player is waiting');
    });

    player.on('dispose', () => {
      // console.log('player will dispose');
    });
  };

  const changePlayerOptions = () => {
    // you can update the player through the Video.js player instance
    if (!playerRef.current) {
      return;
    }
    // [update player through instance's api]
    playerRef.current.src([{ src, type }]);
  };

  return (
    <>
      <VideoJS options={videoJsOptions} onReady={handlePlayerReady} />
    </>
  );
};

export default VideoViewer;
